<template>
  <div class="managementContent">
    <el-row :gutter="20">
      <el-col :span="6">
        <span class='managementTitle'>{{$t('WEB管理')}}</span>
        <div class='managementLink'>
          <el-link type="success" :underline="false" @click="dialogVisible(record.https, 'https')" class="https">{{$t('编辑')}}</el-link>
        </div>
        <!-- <el-switch :width="56" v-model="https" @change='protectAllChange($event, "https")' active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :active-text="$t('允许')" :inactive-text="$t('拒绝')"></el-switch> -->
      </el-col>
      <el-col :span="6">
        <span class='managementTitle'>{{$t('用户认证')}}</span>
        <div class='managementLink'>
          <el-switch :width="lang === 'zh'?56:67" v-model="record.portal.status" class="portal switch" @change='protectAllChange($event, "portal")' active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :active-text="$t('允许')" :inactive-text="$t('拒绝')"></el-switch>
        </div>
      </el-col>
      <el-col :span="6">
        <span class='managementTitle'>{{$t('SSH管理')}}</span>
        <div class='managementLink'>
          <el-link type="success" :underline="false" @click="dialogVisible(record.ssh, 'ssh')" class="ssh">{{$t('编辑')}}</el-link>
        </div>
        <!-- <el-switch :width="56" v-model="ssh" @change='protectAllChange($event, "ssh")' active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :active-text="$t('允许')" :inactive-text="$t('拒绝')"></el-switch> -->
      </el-col>
      <el-col :span="6">
        <span class='managementTitle'>SNMP</span>
        <div class='managementLink'>
          <el-link type="success" :underline="false" @click="dialogVisible(record.snmp, 'snmp')" class="snmp">{{$t('编辑')}}</el-link>
        </div>
        <!-- <el-switch :width="56" v-model="snmp" @change='protectAllChange($event, "snmp")' active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :active-text="$t('允许')" :inactive-text="$t('拒绝')"></el-switch> -->
      </el-col>
      <el-col :span="6">
        <span class='managementTitle'>ping</span>
        <div class='managementLink'>
          <el-switch :width="lang === 'zh'?56:67" v-model="record.ping.status" class="ping switch" @change='protectAllChange($event, "ping")' active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :active-text="$t('允许')" :inactive-text="$t('拒绝')"></el-switch>
        </div>
      </el-col>
      <el-col :span="6">
        <span class='managementTitle'>{{$t('管理平台')}}</span>
        <div class='managementLink'>
          <el-switch :width="lang === 'zh'?56:67" v-model="record.api.status" class="api switch" @change='protectAllChange($event, "api")' active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :active-text="$t('允许')" :inactive-text="$t('拒绝')"></el-switch>
        </div>
      </el-col>
      <el-col :span="6">
        <span class='managementTitle'>IPSec VPN</span>
        <div class='managementLink'>
          <el-switch :width="lang === 'zh'?56:67" v-model="record.ipsec.status" class="ipsec switch" @change='protectAllChange($event, "ipsec")' active-color="#009966" inactive-color="#CCCCCC" active-value="enable" inactive-value="disable" :active-text="$t('允许')" :inactive-text="$t('拒绝')"></el-switch>
        </div>
      </el-col>
    </el-row>
    <span class="managementTips">{{$t('提示：web管理和ssh管理都关闭时，只能通过串口进行连接！')}}</span>
    <management-dialog v-if="managementDialogVisible" ref="refManagementDialogVisible"></management-dialog>
  </div>
</template>
<script>
import { changeManagementPortInfo, getAccessInfo } from '@/api/safe/access/protect'
import ManagementDialog from './ManagementDialog'
export default {
  name: 'ManagementTools',
  components: {
    ManagementDialog
  },
  props: ['dataList'],
  data () {
    return {
      managementDialogVisible: false,
      lang: this.$i18n.locale,
      record: {
        https: {
          status: 'enable',
          port: ''
        },
        portal: {
          status: 'enable'
        },
        ssh: {
          status: 'enable',
          port: ''
        },
        snmp: {
          status: 'enable',
          port: ''
        },
        ping: {
          status: 'enable'
        },
        api: {
          status: 'enable'
        },
        ipsec: {
          status: 'enable'
        }
      }
    }
  },
  watch: {
    dataList: {
      handler (value) {
        this.record = Object.assign(this.record, value.input)
      }
    }
  },
  methods: {
    listData () {
      getAccessInfo().then(res => {
        if (res.status === 0) {
          this.record = res.info[0].input
        }
      })
    },
    protectAllChange (status, name) {
      changeManagementPortInfo({ name: name, status: status })
    },
    // 添加按钮表单
    dialogVisible (data, name) {
      this.managementDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refManagementDialogVisible.init(data, name)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.managementContent {
  margin-top: 15px;
  line-height: 40px;

  .el-col {
    width: 260px;
    margin-right: 3px;
    margin-bottom: 3px;
    background-color: #eeeeee;
    display: inline-block;
  }

  .el-row {
    max-width: 1250px;
  }
}

.managementTips {
  font-size: 12px;
  color: red;
}

.managementTitle {
  width: 165px;
  margin-left: 10px;
  display: inline-block;
}

.managementLink {
  width: 60px;
  height: 40px;
  line-height: 40px;
  display: inline-block;
  text-align: center;
}
</style>
